<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::main})}">
<head>
    <title>博客首页</title>
</head>
<body>
    <main>
        <div class="row">
            <div class="col-md-8">
                <h2>最新文章</h2>
                <div class="list-group mb-4">
                    <div th:if="${#lists.isEmpty(articles)}" class="text-center py-3">
                        暂无文章
                    </div>
                    <a th:each="article : ${articles}" 
                       th:href="@{'/article/' + ${article.id}}"
                       class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-1" th:text="${article.title}">文章标题</h5>
                            <small th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}">发布时间</small>
                        </div>
                        <div class="mb-1">
                            <span th:each="tag : ${article.tags}" 
                                  class="badge bg-secondary tag-badge" 
                                  th:text="${tag}">标签</span>
                        </div>
                        <small class="text-muted">
                            作者：<span th:text="${article.authorName}">作者</span> •
                            评论：<span th:text="${article.commentCount}">0</span>
                        </small>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">热门标签</h5>
                        <div class="tag-cloud">
                            <a th:each="tag : ${tags}" 
                               th:href="@{/(tag=${tag.name})}"
                               class="badge bg-primary tag-badge"
                               th:text="${tag.name}">标签名</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html> 